<!-- tab类目切换组件 -->
<template>
  <view class="items_grid_list">
    <!-- 判断tab类型 -->
    <view class="items-change-title">
      <!-- 判断是否是 HTML标签 -->
      <block v-if="tabsData.config.is_htmlTab == 1">
        <view :class="tabsData.config.tabs_data.class" :style="tabsData.config.tabs_data.style">
          <block v-for="(tabsName, index) in tabsData.config.tabs_data.child" :key="index">
            <view v-if="tabsName.tagType == 'div'" :class="tabsName.class" :style="tabsName.style">
              <block v-if="tabsName.text">{{tabsName.text}}</block>
              <block v-for="(secondTabsName, secondTabsIndex) in tabsName.child" :key="secondTabsIndex">
                <view
                  v-if="secondTabsName.tagType == 'a'"
                  @click="changeTab"
                  :data-tabnum="secondTabsIndex"
                  :class="secondTabsName.class"
                  :data-index="indexOne"
                  :style="tabNum == secondTabsIndex ? secondTabsName.active:secondTabsName.style">
                  <block v-if="secondTabsName.text">{{secondTabsName.text}}</block>
                  <block v-for="(thirdTabsName, thirdTabsIndex) in secondTabsName.child" :key="thirdTabsIndex">
                    <span v-if="thirdTabsName.tagType == 'span'" :style="thirdTabsName.style">{{thirdTabsName.text}}</span>
                  </block>
                </view>
              </block>
            </view>
          </block>
        </view>
      </block>

      <!-- 判断是否是 HTML商品(可滑动) -->
      <view
        class="tab_change"
        v-if="tabsData.config.is_htmlTab == 0 && tabsData.config.changeTab == 1"
      >
        <block v-for="(tabData, tabIndex) in tabsData.tabs" :key="tabIndex">
          <view
            :class="tabNum == tabIndex ? 'tabActive' : ''"
            @click="tabHandle"
            :data-tabnum="tabIndex"
            :data-categoryTitle="tabData.label"
            :data-tabIndex="tabIndex"
            :data-tabCid="tabData.cid"
          >
            {{ tabData.label }}
          </view>
        </block>
      </view>

      <!-- 判断是否是 HTML商品 -->
      <view class="tab_change" v-if="tabsData.config.is_htmlTab == 0 && tabsData.config.changeTab == 0">
        <block v-for="(tabData,tabIndex) in tabsData.tabs" :key="tabIndex">
          <view
            :class="tabNum == tabIndex ? 'tabActive' :''"
            @click="tabHandle"
            :data-tabnum="tabIndex"
            :data-categoryTitle="tabData.label"
            :data-tabIndex="tabIndex"
            :data-tabCid="tabData.cid"
          >{{tabData.label}}</view>
        </block>
      </view>
    </view>


    <!-- 滑动商品切换tab -->
    <view class="tabs-content" v-if="tabsData.config.changeTab == 1">
      <swiper
        :style="{ height: swiperHeight + 'px' }"
        :duration="500"
        :indicator-dots="false"
        :autoplay="false"
        class="swiper"
        :current="tabNum"
        ref="swiper"
        @change="changeScroll"
      >
        <swiper-item
          v-for="(tabsItem, tabsIndex) in tabsData.tabs"
          :key="tabsIndex"
        >
          <tabChangeItems
            id="items_grid_lists"
            v-if="tabNum == tabsIndex"
            v-on:pGetFavoriteList="getFavoriteList"
            :tabChangeData="tabsItem"
            :userLogin.sync="userLogin"
            :favoriteItemIds.sync="favoriteItemIds"
            :addfavorites.sync="addfavorites"
            @favoriteHandle="favoriteHandle"
            @cartNumStatus="cartNumStatus"
            @setListHeight="setSwiperHeight"
          >
          </tabChangeItems>
        </swiper-item>
      </swiper>
    </view>


    <!-- tab切换组件展示内容 -->
    <view class="tabs-content" v-if="tabsData.config.changeTab == 0">
      <block v-for="(tabsItem,tabsIndex) in tabsData.tabs" :key="tabsIndex">
        <tabChangeItems
          v-if="tabNum == tabsIndex"
		      v-on:pGetFavoriteList="getFavoriteList"
          :tabChangeData="tabsItem"
          :userLogin.sync="userLogin"
          :favoriteItemIds.sync="favoriteItemIds"
          :addfavorites.sync="addfavorites"
          @favoriteHandle="favoriteHandle"
          @cartNumStatus="cartNumStatus">
        </tabChangeItems>
      </block>
    </view>
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../../utils/filter.wxs"></script>
<script>
  import Vue from 'vue';
  import api from '@/api/api';
  import tip from '@/utils/tip';
  import {
    CART_KEY,
    USER_INFO,
    SYSTEM_INFO,
    MERCHANT_INFO,
    CUSTOMER_INFO,
    USER_SPECICAL_INFO,
  } from '@/utils/constant';
  import tabChangeItems from './tabChangeItems.vue'
  export default{
    name: 'wxParseTemplate1tabType',
    components: {
      tabChangeItems,
    },
    props: {
      tabsData:Object,
      userLogin:Boolean,
      favoriteItemIds:{
        type:Array,
        twoWay: true
      },
      addfavorites: String,
    },

    data() {
      return{
        tabChangeData:{},
        purchasetype: 1,
        special: 0,
        itemShowType : 'vertical',
        isValid:1,  //默认不显示0库存
        groupId:-1,

        tabsContent:[],

        tabNum:0,

        // 收藏
        collectedItems:[],
        // favoriteItemIds : [],
        swiperHeight: "",
       }
    },

    created:function(option) {
     let that = this;
     let merchantInfo = uni.getStorageSync(MERCHANT_INFO) || '';
    },

    mounted() {
      let that = this
      setTimeout(() => {
        that.setSwiperHeight()
      }, 1000);
    },

    watch:{
      tabNum:function(newVal,oldVal){
        this.tabNum = newVal
      }
    },

    methods:{
      // 动态获取轮播图高度
      setSwiperHeight() {
        let query = uni.createSelectorQuery().in(this);
        query.selectAll('#items_grid_lists').boundingClientRect();
        query.exec((res) => {
          this.swiperHeight = res[0][0].height;
         
        });
      },

      // 类目切换组件点击事件 后台配置
      changeTab(e){
        this.tabNum = Number(e.target.dataset.tabnum) ||  Number(e.currentTarget.dataset.tabnum);
        setTimeout(() => {
          this.setSwiperHeight()
        }, 1000);
      },

      // tab类目切换点击事件
      tabHandle(e){
        this.tabNum = Number(e.target.dataset.tabnum) ||  Number(e.currentTarget.dataset.tabnum);
        setTimeout(() => {
          this.setSwiperHeight()
        }, 1000);
      },

      // 滑动轮播切换tab
      changeScroll(e) {
        this.tabNum = e.target.current || e.detail.current;
        setTimeout(() => {
          this.setSwiperHeight()
        }, 1000);
      },

      // 收藏
      favoriteHandle(val){
        this.$emit("favoriteHandle", true);
      },
      getFavoriteList(){
        this.$emit("pGetFavoriteList");
      },
      // 购物车数量变化
      cartNumStatus(val){
        let number = val;
        this.$emit("cartNumStatus", number);
      },
    }

  }
</script>

<style lang="less">
  // 类目切换名称
  .items_grid_list{
    padding: 0rpx 10rpx;
    font-size:28rpx;
  }
  .tab_change{
    display: flex;
    justify-content: center;
    padding-bottom: 60rpx;
    font-size:28rpx;

    view{
      color: #7f7f7f;
      font-size: 28rpx;
      margin: 0 23px 0 0;
      display: inline-block;
      border-bottom: 1px solid #7f7f7f;
    }
    .tabActive{
      color:#000 !important;
      border-bottom: 1px solid #000000;
    }
  }
</style>
